<template>
	<view  :class="view_class">
			<view class="login-mask center" v-if="show">
				<view class="loginModel">
					<view class="center">
						您还未登录，点击集装箱平台
					</view>
					<view class="center justy">
						<view class="nologinBtn" @click="goback">暂不登录</view>
						<view class="center loginBtn">
							微信登录
							<button open-type='getUserInfo' @getuserinfo='getUserInfoBtn'></button>
						</view>
					</view>
				</view>
			</view>
			<button open-type='getPhoneNumber' @getphonenumber='getphonenumber' v-if="show2" class="center tel-btn">授权手机号码</button>
			<!-- <button open-type="getPhoneNumber" @getphonenumber="getphonenumber" v-if="show2" class="center tel-btn">授权手机号码</button> -->
	</view>
</template>

<script>
	import comm from '../../static/data/commFunc.js'
	import cfg from '../../static/data/config.js'
	var r = cfg.router;
	export default {
		data() {
			return {
				view_class:{
					width:'',
					height:''
				},
				show:false,
				show2:false
			};
		},
		onLoad(){
			var that = this;
			that.view_class.width =wx.getSystemInfoSync().windowWidth
				that.view_class.height =wx.getSystemInfoSync().windowHeight
				// that.view_class = wx.getSystemInfoSync().windowWidth+'px'+";"+wx.getSystemInfoSync().windowHeight+'px'
				console.log(that.view_class)
		},
		onShow() {
			var that = this;
			if(!comm.getCache("nickName")){
				this.show = true
				return
			}
			if(!comm.getCache("isLogin")){
				this.show2 = true
			}
		},
		methods:{
			getUserInfoBtn() {
				var that = this;
				// 获取用户信息
				uni.getUserInfo({
					provider: 'weixin',
					success: function(infoRes) {
						console.log(infoRes)
						comm.setCache("iv", infoRes.iv)
						comm.setCache("encryptedData", infoRes.encryptedData)
						comm.setCache("nickName", infoRes.userInfo.nickName)
						comm.setCache("avatarUrl", infoRes.userInfo.avatarUrl)
						//调用登录接口
						uni.login({
							provider: 'weixin',
							success: function(loginRes) {
								console.log(loginRes.code);
								//调用登录接口	
								let data = {
									code: loginRes.code
								}
								comm.request("POST", "/public/login", data, (res, data) => {
									console.log("登录结果", res)
									if (res.data.ret_code == 200) {
										comm.setCache("token", data)
										that.show = false
										that.show2 = true
									} else {
										comm.showToast(res.data.ret_msg, "none")
									}
								})
							}
						})
					}
				});
			},
			goback(){
				uni.navigateBack({
				  delta: 2
				})
			},
			getphonenumber(e){
				var encryptedData = encodeURIComponent(e.detail.encryptedData);
				var iv = e.detail.iv;
				let data = {
					encryptedData: encryptedData,
					iv: iv,
					nickName: comm.getCache("nickName"),
					headImgUrl: comm.getCache("avatarUrl")
				};
				comm.request("POST", "/app/member/getUser", data, (res, data) => {
					console.log("保存用户手机信息", res)
					if (res.data.ret_code == 200) {
							this.goback()
							comm.setCache("isLogin",true)
					} else {
						comm.showToast(res.data.ret_msg, "none")
					}
				})
			}
		},
		
	}
</script>

<style lang="less">
	.container{
		width: 100%;
		height: 100%;
		position: relative;
	}
.login-mask {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 9;
	}

	.loginModel {
		width: 618rpx;
		height: 348rpx;
		background-color: #fff;
		margin: 0 auto;
		border-radius: 14rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		color: #282828;
		font-size: 32rpx;
		padding-top: 80rpx;
	}

	.justy {
		margin-top: 60rpx;
		align-items: center;
		justify-content: space-around;
	}

	.loginBtn {
		width: 200rpx;
		// height: 92rpx;
		padding: 10rpx 20rpx;
		border-radius: 30rpx;
		background: #D93011;
		border: 1px solid #D93011;
		font-size: 30rpx;
		color: #fff;
		position: relative;

		image {
			width: 46rpx;
			height: 38rpx;
			margin-right: 20rpx;
		}

		button {
			position: absolute;
			top: 0;
			left: 0;
			width: 200rpx;
			height: 60rpx;
			padding: 0;
			margin: 0;
			opacity: 0;
		}
	}

	.nologinBtn {
		width: 200rpx;
		border: 1px solid #D93011;
		padding: 10rpx 20rpx;
		border-radius: 30rpx;
		text-align: center;
		font-size: 30rpx;
	}
	.tel-btn{
		margin:0 60rpx;
		margin-top:200rpx;
		border: 1px solid #D93011;
		background:#D93011 ;
		color:#FFFFFF;
		font-size: 28rpx;
		padding:10rpx 0;
		border-radius: 60rpx;
		// background:transparent;
		}
</style>
